<template>
  <div class="exception-handle">
    <div class="exception-header">
      <el-form :inline="true" class="adjustCondition">
        <el-form-item label="关键字:">
          <el-input v-model="queryForm.keyword" placeholder="输入设备编号/发运计划编号/往来名称/货物名称等"></el-input>
        </el-form-item>
        <el-form-item class="time" label="截止时间:">
          <el-date-picker
            value-format="yyyy-MM-dd"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="input"
            class="adjustDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button  class="search-btn" type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button
        type="primary"
        size="small"
        @click="add"
      >新增</el-button>
        <section class="right-but" style="display:flex">
            <el-button type="text" style="margin-right:-13px"  @click="refreshList()">
                <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png" >
            </el-button>
            <PopoverBut :checkedProps="checkedProps"  :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
        </section>
    </div>
    <div class="exception-table">
      <div class="exception-table-content">
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="70"></el-table-column>
          <el-table-column label="设备编号" prop="register.outerCode" min-width="140">
            <template slot-scope="scope">
              <span v-if="scope.row.register && scope.row.register.outerCode">{{scope.row.register.outerCode}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="设备位置" prop="register.address" min-width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.register && scope.row.register.address">{{scope.row.register.address}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="业务类型" prop="business.processType" min-width="110">
            <template slot-scope="scope">
              {{$dictUtils.getDictLabel("processType", scope.row.business.processType, "")}}
            </template>
          </el-table-column>
          <el-table-column label="发运计划编号" prop="plan.planCode" min-width="170"></el-table-column>
          <el-table-column label="往来名称" prop="business.companyName" min-width="220"></el-table-column>
          <el-table-column label="货物" prop="product.name" min-width="100"></el-table-column>
          <el-table-column label="绑定有效期" prop="" width="220">
            <template slot-scope="scope">
              <p>{{scope.row.startDate}} ~</p>
              <p>{{scope.row.endDate}}</p>
            </template>
          </el-table-column>
          <el-table-column width="90" label="状态" prop="state">
            <template slot-scope="scope">
              <div class="state" :class="{normal: scope.row.state===1,empty: scope.row.state===0}"><span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}</div>
            </template>
          </el-table-column>
          <span v-for="(item,index) in checkedProps" :key="index">
            <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy && scope.row.createBy.loginName">
                          {{scope.row.createBy.loginName | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
            <el-table-column prop="createDate" :label="item"  min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy && scope.row.updateBy.loginName">
                          {{scope.row.updateBy.loginName | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item"  min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>
          </span>
          <el-table-column label="操作" prop="" width="172">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleCommand({method:'enable', row:scope.row})" v-if="scope.row.state === 0 && hasPermission('transportPlan:fixEquip:modifyState')">启用</el-link>
              <el-link type="primary" @click="handleCommand({method:'disable', row:scope.row})" v-if="scope.row.state === 1 && hasPermission('transportPlan:fixEquip:modifyState')">停用</el-link>
              <el-link type="primary" v-if="hasPermission('transportPlan:fixEquip:edit')" @click="edit(scope.row)">修改</el-link>
              <el-link type="primary" @click="handleCommand({method:'delData', row:scope.row})" v-if="hasPermission('transportPlan:fixEquip:del')">删除</el-link>
<!--              <el-dropdown @command="handleCommand">-->
<!--                <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                  <el-dropdown-item type="primary" :command="{method:'delData', row:scope.row}" v-if="hasPermission('transportPlan:fixEquip:del')">删除</el-dropdown-item>-->
<!--                  <el-dropdown-item type="primary" :command="{method:'enable', row:scope.row}" v-if="scope.row.state === 0 && hasPermission('transportPlan:fixEquip:modifyState')">启用</el-dropdown-item>-->
<!--                  <el-dropdown-item type="primary" :command="{method:'disable', row:scope.row}" v-if="scope.row.state === 1 && hasPermission('transportPlan:fixEquip:modifyState')">停用</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--              </el-dropdown>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="page.pageSize"
          :current-page="page.pageNo"
          layout="total,sizes,prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
    <EditForm
      ref="editForm"
      @refreshDataList="getList(page, '', '', '', '', '')"
    ></EditForm>
  </div>
</template>

<script>
  import { getList, del, modifyState } from '@/api/transplan/fixEquip.js'
  import EditForm from './editForm'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    components: {
      EditForm,
        PopoverBut
    },
    data () {
      return {
          checkedProps: options1,
        loading: false,
        value1: [],
        input: '',
        checked: true,
        tableData: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        queryForm: {
          keyword: ''
        },
        orderBy:{
            name: 'createDate',
            method: 'desc'
        },
          options: [
              {
                  label: '创建人',
                  key: 'createBy.loginName'
              },
              {
                  label: '创建时间',
                  key: 'createDate'
              },
              {
                  label: '上次操作人',
                  key: 'updateBy.loginName'
              },
              {
                  label: '上次操作时间',
                  key: 'updateDate'
              }]
      }
    },
    methods: {
      onSubmit () {
        this.getList(this.page, '', '', this.queryForm.keyword, this.input)
      },
      // 获取列表带分页
      getList (params, orderName, orderByAORC, keyword, date) {
        this.loading = true
        getList({
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          orderBy: this.orderBy.name,
          orderByAORC: this.orderBy.method,
          keyword: keyword,
          startTime: date == null ? null : date[0],
          endTime: date == null ? null : date[1]
        }).then(({data}) => {
          if (data.code === '200') {
            this.tableData = data.result.list
            this.page.total = data.result.count
            this.loading = false
            console.log(this.tableData)
          }
        })
      },
        // 是否显示某列数据
        handlerCloumn (e) {
            this.checkedProps = e
        },
        refreshList () {
            this.getList(this.page, '', '', '', '', '')
        },
      add () {
        this.$refs.editForm.init('add')
      },
      edit (row) {
        this.$refs.editForm.init('edit', row)
      },
      handleCommand (command) {
        if (command.method === 'delData') {
          this.delData(command.row.id)
        } else if (command.method === 'enable') {
          this.modifyState(command.row.id, 1)
        } else if (command.method === 'disable') {
          this.modifyState(command.row.id, 0)
        }
      },
      delData (ids) {
        console.log(ids)
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          del({
            ids: ids
          }).then(({data}) => {
            if (data.code === '200') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList(this.page, '', '', '', '', '')
            }
          })
        })
      },
      modifyState (id, state) {
        modifyState({
          id: id,
          state: state
        }).then(({data}) => {
          if (data.code === '200') {
            this.$message({
              type: 'success',
              message: '修改状态成功!'
            })
            this.getList(this.page, '', '', '', '', '')
          }
        })
      },
      refresh(){
          this.input = ''
          this.queryForm = {}
      },
      // 日期选择
      changeHandlerDate (e) {
        this.queryForm.startTime = e[0]
        this.queryForm.endTime = e[1]
      },
      handleSizeChange (e) {
        this.page.pageSize=e
        this.getList(this.page, '', '', '', '', '')
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getList(this.page, '', '', '', '', '')
      }
    },
    mounted () {
      this.getList(this.page, '', '', '', '', '')
    }
  }
</script>

<style lang="scss" scoped>
@import '@/assets/scss/config.scss';
  .exception-handle {
    p{
      margin: 0;
    }
    .exception-header {
      ::v-deep.el-form{
        .el-form-item.time{
          margin-left: 50px;
        }
        .el-form-item{
          margin-bottom: 20px;
          margin-right: 0;
        }
        .el-button--primary {
          margin-left: 50px;
        }
      }

      .weigh-time-mark {
        width: 69px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        margin-right: 10px;
      }

      .weigh-keyword {
        margin-left: 30px;
        width: 53px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }

      ::v-deep.el-input {
        width: inherit;

        input {
          width: 350px;
        }
      }


    }

    ::v-deep.exception-table {
      margin-top: 10px;
      .el-table__header-wrapper{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }
      th{
        height: 46px;
        background: #EEEEEE;
        padding: 0;
        /*border-color: #dddddd;*/
      }

      .el-table__row{
        td{
          /*padding: 0;*/
          /*border-color: #dddddd;*/
        }
        .cell{
          /*text-align: center;*/
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          /*height: 48px;*/
          /*padding: 6px 5px;*/
          box-sizing: content-box;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 25px;
        }
        .el-link,.el-dropdown-link,.el-icon-arrow-down{
          font-size: 16px;
        }
        .el-dropdown-link {
          cursor: pointer;
          color: $--color-primary-liyu;
        }
        .el-link--inner{
          margin-right: 10px;
        }
        .el-link:last-child .el-link--inner{
          margin-right: 0;
        }
        .el-link.is-underline:hover:after{
          border-bottom: none;
        }
      }
    }

  }
</style>
